<template>
    <div class="container">
        <div class="apply-container">
            <div class="apply-container-head"></div>
            <div class="apply-container-body">
                <div class="apply-container-body-title">
                    <div class="apply-container-body-title-font">用车申请详情</div>
                    <div class="apply-container-body-title-return">
                        <el-button size="small" @click="goBackPage">返回</el-button>
                    </div>
                </div>
                <el-divider class="apply-container-body-title-line"></el-divider>
                <div class="apply-container-body-content">
                    <el-form :model="AutoOrder" label-width="100px" label-position="LabelPosition" style="width: 100%;">
                        <el-form-item label="用车部门:" prop="SelectUserDepartment" style="width: 35%;">
                            <el-select v-model="AutoOrder.SelectUserDepartment" placeholder="请选择用车部门" :disabled="true"
                                clearable>
                                <el-option label="销售部" value="销售部"></el-option>
                                <el-option label="财务部" value="财务部"></el-option>
                                <el-option label="市场部" value="市场部"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="姓名:" prop="InputUserName" style="width: 40%;">
                            <el-input v-model="AutoOrder.InputUserName" placeholder="请输入姓名" :disabled="true"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="工号:" prop="InputUserId" style="width: 40%;">
                            <el-input v-model="AutoOrder.InputUserId" placeholder="请输入工号" :disabled="true"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="申请人电话:" prop="InputUserPhone" style="width: 40%;">
                            <el-input v-model="AutoOrder.InputUserPhone" placeholder="请输入申请人电话" :disabled="true"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="车型:" prop="SelectAutoType" style="width: 35%;">
                            <el-select v-model="AutoOrder.SelectAutoType" placeholder="请选择车型" :disabled="true" clearable>
                                <el-option label="商务车" value="商务车"></el-option>
                                <el-option label="客车" value="客车"></el-option>
                                <el-option label="货车" value="货车"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="成员数:" prop="InputPassengerNum" style="width: 40%;">
                            <el-input v-model="AutoOrder.InputPassengerNum" placeholder="请输入成员数" :disabled="true"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="用车时间:" prop="AutoStartTime" style="width: 35%;">
                            <el-date-picker v-model="AutoOrder.AutoStartTime" type="datetime"
                                value-format="yyyy-MM-dd-HH-mm" placeholder="请选择日期时间" :disabled="true"
                                clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item label="截止时间:" prop="AutoArriveTime" style="width: 35%;">
                            <el-date-picker v-model="AutoOrder.AutoArriveTime" type="datetime"
                                value-format="yyyy-MM-dd-HH-mm" placeholder="请选择日期时间" :disabled="true"
                                clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item label="目的地:" prop="InputUserDestination" style="width: 50%;">
                            <el-input v-model="AutoOrder.InputUserDestination" placeholder="请输入目的地" :disabled="true"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="用车事由:" prop="InputAutoUseReason" style="width: 50%;">
                            <el-input v-model="AutoOrder.InputAutoUseReason" type="textarea" :disabled="true"
                                placeholder="请输入内容" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="提交时间:" prop="SubmitTime" style="width: 50%;">
                            <el-input v-model="AutoOrder.SubmitTime" :disabled="true" clearable></el-input>
                        </el-form-item>
                        <!-- <div class="apply-container-body-content-submit">
                            <el-button type="primary" @click="Submit">提交</el-button>
                        </div> -->
                    </el-form>
                </div>
            </div>
            <div class="apply-container-footer"></div>
        </div>
    </div>
</template>

<script>
import { getAutoOrderDetail } from "@/api/order.js"
export default {
    name: 'AutoOrderDetailView',
    data() {
        return {
            LabelPosition: 'right',
            AutoOrder: {
                SelectUserDepartment: null,
                InputUserName: null,
                InputUserId: null,
                InputUserPhone: null,
                SelectAutoType: null,
                InputPassengerNum: null,
                AutoStartTime: null,
                AutoArriveTime: null,
                InputUserDestination: null,
                InputAutoUseReason: null,
                SubmitTime: null,
            },

            AutoOrderData: null
        }
    },

    methods: {
        goBackPage() {
            this.$router.go(-1)
        },
    },
    mounted() {
        getAutoOrderDetail(this.$route.query.autoOrderId).then(res => {
            this.AutoOrderData = res.data.data

            this.AutoOrder.SelectUserDepartment = this.AutoOrderData.userDepartment
            this.AutoOrder.InputUserName = this.AutoOrderData.userName
            this.AutoOrder.InputUserId = this.AutoOrderData.userId
            this.AutoOrder.InputUserPhone = this.AutoOrderData.userPhone
            this.AutoOrder.SelectAutoType = this.AutoOrderData.autoType
            this.AutoOrder.InputPassengerNum = this.AutoOrderData.passengerNum
            this.AutoOrder.AutoStartTime = this.AutoOrderData.autoStartTime
            this.AutoOrder.AutoArriveTime = this.AutoOrderData.autoArriveTime
            this.AutoOrder.InputUserDestination = this.AutoOrderData.userDestination
            this.AutoOrder.InputAutoUseReason = this.AutoOrderData.autoUseReason
            this.AutoOrder.SubmitTime = this.AutoOrderData.submitTime
        })
    }
}
</script>

<style scoped>
.container {
    /* height: 100%; */
    width: 95%;
    margin: 0 auto;
    margin-top: 1%;
    background-color: #ffffff;
}

.apply-container {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    /* background-color: #f2f2f2; */

}

.apply-container-head {
    width: 95%;
    height: 30px;
    margin: 0 auto;
}

.apply-container-body {
    width: 95%;
    height: 92%;
    margin: 0 auto;
    background-color: #ffffff;

}

.apply-container-body-title {
    width: 98%;
    height: 5%;
    margin: 0 auto;
    display: flex;
}

.apply-container-body-title-return {
    width: 100%;
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
}

.apply-container-body-title-line {
    height: 1px;
    width: 98%;
    margin: 5px auto;
}

.apply-container-body-title-font {
    width: 100%;
    height: 99%;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    padding-top: 10px;
}

.apply-container-body-content {
    width: 85%;
    height: 100%;
    margin: 20px auto;
    display: flex;

}

.apply-container-body-content-submit {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.apply-container-footer {
    width: 95%;
    height: 10px;
    margin: 0 auto;
}
</style>